<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib tagdir="/WEB-INF/tags" prefix="tag"%>

<s:set var="user_info" value="%{#session.USER_INFO}" />
<s:if test="%{#user_info == null}"><jsp:forward page="login.jsp"></jsp:forward></s:if>

<s:set var="CATEGORY_ITEM" value="%{#request.CATEGORY_ITEM}" />

<html>
<head>

<title>EPCS Calendar</title>
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-theme.css" rel="stylesheet" media="screen">
<link href="css/ace.min.css" rel="stylesheet" media="screen">
<link href="css/font-awesome.min.css" rel="stylesheet"/>
<link href="css/jquery.tagsinput.css" rel="stylesheet"/>
<link href="css/trung-style.css" rel="stylesheet" media="screen">
<link href='css/cupertino/jquery-ui.min.css' rel='stylesheet' />

<script src="js/jquery.min.js"></script>
<script src="js/jquery-1.9.0.min.js"></script>
<script src="js/jquery.tagsinput.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/ace.min.js"></script>
<script src='js/jquery-ui.custom.min.js'></script>
<script src="http://localhost:8081/socket.io/socket.io.js"></script>


</head>
<body>

	<div class="index">
		<!--header -->
		<tag:HeaderTag username="${user_info.fullname}">
			<div class="breadcrumbs" id="breadcrumbs" style="margin-bottom: 10px">
				<ul class="breadcrumb" style="margin: 8px;">
					<li><i class="icon-home home-icon"></i><a href="./Index.do">Trang chủ</a></li>
					<li class="active">Thể loại sự kiện</li>
				</ul>
				<!-- .breadcrumb -->
			</div>
		</tag:HeaderTag>
		<!--end header -->

		<!-- main body -->
		<tag:SideBarTag active_area="5"  subMenuOpen="1"></tag:SideBarTag>

		<div class="main-content">			
			<div class="page-header"><h1>Các sự kiện thuộc thể loại ${CATEGORY_ITEM.eventCategoryName}</h1></div>
			 <div class="row">
                <!-- left column -->
                <div class="col-md-8 boxContent"  id="scrollArea">
				  	<tag:MessageAlertTag></tag:MessageAlertTag>					
                   	<jsp:include page="EventCategoryArea.jsp"></jsp:include>						
                </div>

                <!-- side right column  Suggesstion -------------------------------------------------->
                <div class="col-md-4 boxContent">
                	<jsp:include page="RightSideBarArea.jsp"></jsp:include>
<%--                 	<jsp:include page="RightSideBarArea2.jsp"></jsp:include> --%>
                </div>
            </div>
	        		
		</div>	
		<script>
		
		function changeFollowing(id,eventId,button){
			  button.setAttribute("disabled", "disabled");
		    $.ajax({
	            url: "MostFollowingEvent.do",
	            type: "GET",
	            data: { id: id, eventId: eventId },
	            success: function (data) {
	            	button.removeAttribute("disabled");	
	            	if (data != "Unauthorized"){
	            		var arr = data.split(',');
	            		if(arr[0] != "isExisted"){
		            		if (button.value == "Hủy theo dõi")
		            		{
		            		button.value = "Theo dõi";
		            		button.setAttribute("class","btn btn-success btn-xs");
		            		button.setAttribute("onclick","changeFollowing('',"+eventId+",this)");
		            		//alert("class=" + button.getAttribute("class")+ " onclick="+button.getAttribute("onclick"));
			            	}else if (button.value = "Theo dõi"){
			            		
			            		button.value = "Hủy theo dõi";
			            		button.setAttribute("class","btn btn-danger btn-xs");	
			            		button.setAttribute("onclick","changeFollowing('"+data+"',"+eventId+",this)");
			            		//alert("class=" + button.getAttribute("class")+ " onclick="+button.getAttribute("onclick"));	
			            	}
	            	    }else{
	            			alert("Bạn đã theo dõi sự kiện này!");
	            			button.value = "Hủy theo dõi";
		            		button.setAttribute("class","btn btn-danger btn-xs");	
		            		button.setAttribute("onclick","changeFollowing('"+arr[1]+"',"+eventId+",this)");
		            		//alert("class=" + button.getAttribute("class")+ " onclick="+button.getAttribute("onclick"));	
	            	    }
	            	} else {
	            		window.location.href = "Index.do";
	            	}
	            	
	            	
	            },
	            error: function (data) {
	                alert("fail");
	            }
	        });
		}
		</script>
		
		<script>
		// event scroll paging
	    var processing = true;
	    var pageNumber = 1;
	    var categoryID = ${CATEGORY_ITEM.eventCategoryId};
	    $(document).ready(function() {
			$(document).scroll(function(e) {	
			    if (processing) {
				    var scrollAmount =+ parseInt($(window).scrollTop());
				    var documentHeight = $(document).height();
				
				    // calculate the percentage the user has scrolled down the page
				    var scrollCell = (documentHeight - scrollAmount);
				    if (scrollCell < 800) {
						pageNumber ++;
						processing = true;
						$.ajax({
						    url : "MoreEventByCategory.do",
						    type : "Post",
						    data : {
								pageNumber : pageNumber,
								categoryID : categoryID
						    },
						    success : function(html) {
							var data = html.trim();
							if (data != "Unauthorized") {
							    if (data != 'empty'){
									$('#scrollArea').append(data);	
									
							    } else {
									processing = false;
									//alert("Hết hàng");
							    }
							} else {
							    window.location.href = "Index.do";
							}
						    },
						    error : function(data) {
							alert("fail");
						    }
						});
				    }
			    }
			});
	    });
		</script>
	</div>
</body>
</html>